<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Demo后台管理系统</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<section class="content-header">
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li><a href="#">部门管理</a></li>
		<li class="active">部门列表</li>
	</ol>
</section>
<!-- Main content -->
<section class="content">
	<div class="jax-box jax-box-table">
		<div id="toolbar" class="btn-group grid-table-toolbar">
			<shiro:hasPermission name="permission:add">
				<button id="btn_add" type="button" class="btn btn-primary" style="margin-right: 10px;" data-toggle="modal" data-target="#permissionModal">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
			</shiro:hasPermission>
		</div>
		<!--<table id="table"></table>-->
		<table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
			<thead>
			<tr>
				<th data-field="selectItem" data-checkbox="true"></th>
			</tr>
			</thead>
		</table>
	</div>
	<!-- 用户新增模态框 -->
	<div id="permissionModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">新增部门</h4>
				</div>
				<div class="modal-body">
					<div>
						<form class="form-horizontal" id="permissionForm">
							<div class="box-body">
								<div class="form-group">
									<label class="col-sm-3 control-label">部门名称 :</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="deptName" id="deptName" require="必填项"  placeholder="部门名称">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">上级部门 :</label>
									<div class="col-sm-8">
										<input type="text" class="form-control cursor-pointer" id="parentDeptName" value="选择上级部门" onclick="showDeptList(1)" readonly="readonly">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">排序:</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="orderNum" id="orderNum" value="0"  placeholder="序号">
									</div>
								</div>
								<input type="hidden" class="form-control" id="parentId" name="parentId" value="-1">
							</div>
							<!-- /.box-body -->
							<div class="box-footer">
								<div class="pull-right">
									<button type="button" id="savePermission" class="btn btn-info" >确定</button>
									<button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
								</div>
							</div>
							<!-- /.box-footer -->
						</form>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>

	<!-- 资源详情modal -->
	<!-- 用户新增模态框 -->
	<div id="permissionDetailModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">编辑部门</h4>
				</div>
				<div class="modal-body">
					<div>
						<form class="form-horizontal" id="saveEditForm">
							<div class="box-body">
								<div class="form-group">
									<label class="col-sm-3 control-label">部门名称 :</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="saveEditname" id="saveEditname" require="必填项"  placeholder="部门名称">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">上级部门 :</label>
									<div class="col-sm-8">
										<input type="text" class="form-control cursor-pointer" id="saveEditparentName" value="选择上级部门" onclick="showDeptList(2)" readonly="readonly">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">排序:</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="editorderNum" id="editorderNum" value="0"  placeholder="序号">
									</div>
								</div>
								<input type="hidden" class="form-control" id="saveEditparentId" name="saveEditparentId" value="0">
								<input type="hidden" class="form-control" id="saveDepid" name="saveDepid" value="0">
							</div>
							<!-- /.box-body -->
							<div class="box-footer">
								<div class="pull-right">
									<button type="button" id="saveEdit" class="btn btn-info" >确定</button>
									<button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
								</div>
							</div>
							<!-- /.box-footer -->
						</form>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>

	<div id="menuLayer" style="display: none;padding-left: 20px;">
		<ul id="permissionTree" class="ztree"></ul>
	</div>
</section>
<script>
    var editFlag = "[[${@perms.hasPerm('permission:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('permission:delete')}]]";
    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };

    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {
                field: 'selectItem',
                radio: true
            },
            {
                title: '部门名称',
                field: 'name',
                align: 'left',
            },
            {title: '部门ID',
                field: 'id',
                align: 'left',
            },
            {title: '上级部门',
                field: 'parentName',
                align: 'center',
            },
            {
                title: '排序',
                field: 'orderNum',
                align: 'center',
                width: '60px'
            },
            {
                field : 'operation',
                title : '操作',
                align : "center",
                formatter : function(row, index) {
                    var edit = editFlag=="true"  ?  '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editPermission('+row.id+')">编辑</a>' : '';
                    var del = deleteFlag=="true"  ?  '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deletePermission('+row.id+')">删除</a>' : '';
                    return edit + del;
                }
            }]
        return columns;
    };
	/*编辑权限*/
    function editPermission(deptId) {
        Core.postAjax('/sys/dept/queryDeptById',{"deptId":deptId},function (ret) {
            $("#saveEditparentName").val(ret.parentName);
            $("#saveEditname").val(ret.name);
            $("#saveEditparentId").val(ret.parentId);
            $("#editorderNum").val(ret.orderNum);
            $("#saveDepid").val(deptId);
            $("#permissionDetailModal").modal("show");
            return;
        });
    }
	/*删除权限*/
    function deletePermission(deptId) {
        Core.confirm("确认删除该部门？",function () {
            Core.postAjax('/sys/dept/delete',{"deptId":deptId},function (data) {
                if(data.code==0){
                    Menu.table.refresh();
                    return;
                }
                layer.msg(data.msg);
            });
        })
    }
	/*加载权限列表*/
    $(function () {
        Core.postAjax("/sys/dept/queryDeptById",{},function (ret) {
            var colunms = Menu.initColumn();
            var table = new TreeTable(Menu.id, "/sys/dept/query", colunms,"1");
            table.setExpandColumn(1);
            table.setIdField("1");
            table.setCodeField("id");
            table.setParentCodeField("parentId");
            table.setRootCodeValue(ret.parentId);
            table.setStriped(true);
            //table.setExpandAll(true);//全部展开
            table.init();
            Menu.table = table;
		});
    });



    $(function () {
		/*新增权限保存事件*/
        $("#savePermission").on("click",function(){
			var parentId = $("#parentId").val();
            parentId = Number(parentId);
			if(parentId==-1){
                layer.msg("请选择一个上级部门！");
			    return;
			}

            if(doValidForm(permissionForm)){
                Core.mask("#savePermission");
                $.ajax({
                    type: "GET",
                    url: "/sys/dept/save",
                    data: {
                        "name":$("#deptName").val(),
                        "parentId":$("#parentId").val(),
                        "orderNum":$("#orderNum").val()
                    },
                    success: function (ret) {
                        if(ret.code==0){
                            initPermissionForm();
                            Core.unmask("#savePermission");
                            $("#permissionModal").modal("hide");
                            Menu.table.refresh();
                            return;
                        }
                        layer.msg(ret.msg);
                    }
                });
            }
        })
		/*新增权限modal框关闭后清空数据*/
        $("#permissionModal").on('hidden.bs.modal',function(){
            initPermissionForm();
        })

        $("#saveEdit").on("click",function(){
            var parentId = $("#saveEditparentId").val();
            parentId = Number(parentId);
            if(parentId==-1){
                layer.msg("请选择一个上级部门！");
                return;
            }
            if(doValidForm(saveEditForm)){
                Core.mask("#saveEditForm");
                $.ajax({
                    type: "GET",
                    url: "/sys/dept/update",
                    data: {
                        "name":$("#saveEditname").val(),
                        "parentId":$("#saveEditparentId").val(),
                        "orderNum":$("#editorderNum").val(),
                        "deptId" : $("#saveDepid").val()
                    },
                    success: function (ret) {
                        if(ret.code==0){
                            initPermissionForm();
                            Core.unmask("#saveEditForm");
                            $("#permissionDetailModal").modal("hide");
                            Menu.table.refresh();
                            return;
                        }
                        layer.msg(ret.msg);
                    }
                });
            }
        })

    })

    function  initPermissionForm() {
        $("#deptName").val("");
        $("#parentId").val("-1");
        $("#parentDeptName").val("请选择部门");
        $("#orderNum").val("0");
    }


    function getMenuId () {
        var selected = $('#menuTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            layer.msg("请选择一条记录");
            return false;
        } else {
            return selected[0].id;
        }
    }

	/*选择上级菜单树*/
    function showDeptList(flag) {
        var ztree;
        //树-初始化设置
        var treeSetting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId"
                }
            }
        };
        Core.postAjax('/sys/dept/query', {flag: "2"}, function (data) {
            var topMenu = {
                name: "顶层菜单",
                id: 0,
                parentId: "",
                type: 0
            }
            //data.unshift(topMenu);
            $.each(data, function (i, item) {
                item.open = true;
            })
            ztree = $.fn.zTree.init($("#permissionTree"), treeSetting, data);
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "选择菜单",
                area: ['300px', '450px'],
				/* shade: 0,
				 shadeClose: false,*/
                content: jQuery("#menuLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztree.getSelectedNodes();
                    if (node.length == 0) {
                        layer.msg("请选择一个菜单！", function () {
                        });
                        return;
                    }
                    if (flag == 1) {
                        $("#parentId").val(node[0].id);
                        $("#parentDeptName").val(node[0].name);
                    } else if (flag == 2) {
                        $("#saveEditparentId").val(node[0].id);
                        $("#saveEditparentName").val(node[0].name);
                    }
                    layer.close(index);
                }
            });
        });
    }


</script>